<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>09_Vue实例_生命周期</title>
</head>
<body>
<!--
1. vue对象的生命周期
  1). 初始化显示
    * beforeCreate()
    * created()
    * beforeMount()
    * mounted()
  2). 更新状态
    * beforeUpdate()
    * updated()
  3). 销毁vue实例: vm.$destory()
    * beforeDestory()
    * destoryed()
2. 常用的生命周期方法
  created()/mounted(): 发送ajax请求, 启动定时器等异步任务
  beforeDestory(): 做收尾工作, 如: 清除定时器
-->

<div id="test">
	<button @click="destroyVue">destory vue</button>
	<p v-if="isShow">Luna_Vue_Study</p>
</div>

<script type="text/javascript" src="../vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#test',
        data: {
            isShow: true
        },

        mounted() {
            // 执行异步任务
            this.intervalId = setInterval(() => {
                console.log('-----')
                this.isShow = !this.isShow
            }, 1000)
        },

        beforeCreate(){
          console.log("Vue开始了噢")
        },

        created(){
          console.log("Vue已经创建")
        },

	    beforeUpdate(){
			console.log("更新之前")
	    },

	    updated(){
			console.log("更新完成咯")
	    },


        beforeDestroy() {
            console.log('准备结束咯')
            // 执行收尾的工作
            clearInterval(this.intervalId)
        },

	    destroyed(){
          console.log("结束了")
	    },

        methods: {
            destroyVue() {
                this.$destroy()
            }
        }
    })


</script>
</body>
</html>